<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="coach" :rules="rules" ref="coachFrom" label-width="150px" size="small">
      <el-form-item label="教练头像:">
        <single-upload v-model="coach.driverImgUrl"></single-upload>
      </el-form-item>
      <el-form-item label="教练姓名:">
        <el-input v-model="coach.driverName" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="教练编号:">
        <el-input v-model="coach.driverNumber" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="教练手机:">
        <el-input v-model="coach.driverPhone" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="是否实名:">
        <el-radio-group v-model="coach.isRealname">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否管理员:">
        <el-radio-group v-model="coach.role">
          <el-radio :label="1">否</el-radio>
          <el-radio :label="0">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="校区id:">
        <el-input v-model="coach.areaId" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="部门id:">
        <el-input v-model="coach.departmentId" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="服务区域:">
        <el-input v-model="coach.serviceArea" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="教练介绍:">
        <tinymce :width="525" :height="300" v-model="coach.driverDesc"></tinymce>
      </el-form-item>
      <el-form-item label="科目二练车地址:">
        <el-input v-model="coach.subject2PracticeAddr" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="科目三练车地址:">
        <el-input v-model="coach.subject3PracticeAddr" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="车型:">
        <el-input v-model="coach.practiceCarCarType" class="input-width"></el-input>
      </el-form-item>
      <el-form-item label="排序:">
        <el-input v-model="coach.orderby" class="input-width"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('coachFrom')">提交</el-button>
        <el-button v-if="!isEdit" @click="resetForm('coachFrom')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import SingleUpload from "@/components/Upload/singleUpload";
import Tinymce from "@/components/Tinymce";
import { createCoach, updateCoach, getCoach } from "@/api/dms/coach";

const defaultCoach = {
  driverImgUrl: null,
  driverName: null,
  driverNumber: null,
  isRealname: 0,
  role:1
};

export default {
  name: "CoachDetail",
  components: { SingleUpload, Tinymce },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      coach: null,
      rules: {
        driverImgUrl: [
          { required: true, message: "请上传教练头像", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    if (this.isEdit) {
      getCoach(this.$route.query.id).then(response => {
        this.coach = response.data;
      });
    } else {
      this.coach = Object.assign({}, defaultCoach);
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm("是否提交数据", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            if (this.isEdit) {
              updateCoach(this.$route.query.id, this.coach).then(response => {
                this.$refs[formName].resetFields();
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1000
                });
                this.$router.back();
              });
            } else {
              createCoach(this.coach).then(response => {
                this.$refs[formName].resetFields();
                this.coach = Object.assign({}, defaultCoach);
                this.$message({
                  message: "提交成功",
                  type: "success",
                  duration: 1000
                });
              });
            }
          });
        } else {
          this.$message({
            message: "验证失败",
            type: "error",
            duration: 1000
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.coach = Object.assign({}, defaultCoach);
    }
  }
};
</script>
<style scoped>
.input-width {
  width: 70%;
}
</style>


